<template>
    <div class="Setting">
        <TopBar class="t" :title="'设置'" :url="'/index/my'"></TopBar>
        <div class="top">

        </div>
        <div ref="mask" style="display: none" class="mask"></div>
        <div ref="hidden" style="display: none" class="hidden">
            <div class="hidden-top">
                <div>
                    <h2>发现新版本</h2>
                    <section>V6.1</section>
                </div>
                <img src="../../../assets/img/fly.png" alt="">
            </div>
            <div>
                <section>
                    1、全面支持话题，给喜欢的音乐标签打分吧！
                </section>
                <section>2、支持查看更多精彩评论；</section>
                <section>3、评论举报增加“无关评论”选项</section>
                <div class="sss">WIFI环境下更新不到30s哦~</div>
            </div>
            <div>
                <div>
                    <button @click="closeHandler">残忍拒绝</button>
                    <button @click="closeHandler">立即升级</button>
                </div>
            </div>
        </div>
        <p></p>
        <div class="Setting-1">
            <router-link to="phone">
                <div class="arrow">手机号修改</div>
            </router-link>

            <router-link to="password">
                <div class="arrow">支付密码修改</div>
            </router-link>
        </div>
        <p></p>
        <div  class="Setting-2">
            <router-link to="message">
                <div class="arrow">消息提醒</div>
            </router-link>

            <router-link to="invite">
                <div class="arrow">邀请好友</div>
            </router-link>

        </div>
        <p></p>
        <div  class="Setting-3">
            <router-link to="about">
                <div class="arrow">关于</div>
            </router-link>

            <router-link to="state">
                <div class="arrow">责任声明</div>
            </router-link>

        </div>
        <p></p>
        <div  class="Setting-4">
            <div @click="checkHandler">检查更新</div>
            <router-link to="suggest">
                <div class="arrow">意见反馈</div>
            </router-link>
            <div class="two">
                <span>清理缓存</span>
                <span>16.6MB</span>
            </div>
        </div>
        <p></p>
        <div  class="Setting-5">
            <div class="two">
                <span>加入交流群</span>
                <span>624858659(点击加群)</span>
            </div>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../../component/TopBar";
    export default {
        name: "Setting",
        data(){
        return{

        }
        },
        methods:{
            checkHandler(){
                this.$refs['hidden'].style.display='block'
                this.$refs['mask'].style.display='block'
            },
            closeHandler(){
                this.$refs['hidden'].style.display='none'
                this.$refs['mask'].style.display='none'
            }
        },
        components:{
            TopBar
        }
    }
</script>

<style lang="stylus" scoped>
    .Setting
      position relative

      .t
        padding 0.2rem 0 0 0.13rem

      .mask
        height 10rem
        width 100%
        background-color black
        opacity 0.5
        position absolute
        top 0
        left 0

      .hidden
          height: 2.8rem
          width 2.5rem
          position absolute
          top 1.9rem
          left 0.4rem
          z-index 1

          .hidden-top
            padding 0.2rem
            display flex
            justify-content space-between
            width 120%
            height 1.1rem
            background-color #7D82EC

            img
                width: 0.5rem
                height 0.4rem
                margin 0.16rem 0.25rem 0 0

            h2
              color #ffffff
              font-size 0.16rem

            section
              color #ffffff
              font-size 0.16rem
              font-weight 600
              margin-top -0.28rem

            section+div
              font-size 0.13rem
              color #cccccc

          .hidden-top+div
            padding 0.1rem 0.25rem 0.1rem 0.25rem
            width 120%
            background-color #ffffff
            height 1.6rem

            section
              font-size 0.13rem
              line-height 0.25rem

          .hidden-top+div+div
             width 120%
             button
               width 50%
               cursor pointer
               height 0.52rem
               outline none
               background-color #ffffff
               border 1px solid #F3F3F7
             button:nth-child(1)
               font-size 0.16rem
               color rgba(204,204,204,.8)
             button:nth-child(2)
               font-size 0.15rem
               color #6B5CEB
               font-weight 600
               border-top 2px solid #F3F3F7

      .Setting-1
        height 1rem
        background-color #ffffff
        div
          color black

      .Setting-2
        height 1rem
        background-color #ffffff
        div
          color black

      .Setting-3
        height 1rem
        background-color #ffffff
        div
          color black
      .Setting-4
        height 1.5rem
        background-color #ffffff
        div
          color black
      .Setting-5
        height .5rem
        background-color #ffffff
        div
          color black

      p
        background-color #F5F6FA
        width 100%
        height 0.12rem

      .top
        height 0.34rem
        display flex
        background-color #ffffff

        &~div
          padding 0 0.12rem 0 0.12rem
          line-height 0.5rem

          div
            position relative

          .arrow::after
            content ""
            border-top 0.02rem solid #cccccc
            border-right 0.02rem solid #cccccc
            width 0.08rem
            height 0.08rem
            position absolute
            transform rotate(45deg)
            top 0.21rem
            right 0

          .two
            display flex
            justify-content space-between

            span:nth-child(2)
              color #cccccc
              font-size 0.12rem

        span
          height 0.1rem
          width 0.1rem
          border-left 0.02rem solid black
          border-bottom 0.02rem solid black
          transform rotate(45deg)
          background-color transparent
          display block
          margin 0.08rem 0 0 0.18rem

        h1
          font-size 0.18rem
          margin 0.0rem 0 0  0.1rem
</style>